<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <meta charset="UTF-8">
   <title>后台登录-思文教育网站后台</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>
   <link rel="stylesheet" href="/lib/layui/css/layui.css"/>
   <link rel="stylesheet" href="/css/okadmin-v2.css"/>
   <link rel="stylesheet" href="/css/login.css"/>
</head>
<body>
<div id="app">
   <form class="layui-form">
      <div class="login_face"><img src="/images/a.png" class="userAvatar"></div>
      <div class="layui-form-item input-item">
         <label for="userName">用户名</label>
         <input type="text" lay-verify="required" name="userCode" placeholder="请输入用户名" autocomplete="off" id="userName"
                class="layui-input">
      </div>
      <div class="layui-form-item input-item">
         <label for="password">密码</label>
         <input type="password" lay-verify="required|pass" name="userPwd" placeholder="请输入密码" autocomplete="off"
                id="password" class="layui-input">
      </div>
      <div class="layui-form-item">
         <button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
      </div>
   </form>
</div>

<!--js逻辑-->
<script src="/lib/layui/layui.js"></script>
<script>
  layui.use(['form', 'jquery'], function () {

    var form = layui.form;
    var $ = layui.jquery;
      if (top !== self) {
          parent.location.reload()
      }
    form.verify({
      pass: [
        /^[\S]{6,12}$/,
        '密码必须6到12位，且不能出现空格'
      ]

    });

    form.on('submit(login)', function (data) {
      layer.msg("登陆中...", {icon: 6, time: 1000, anim: 0}, function () {
        //window.location = "index.html";
          $.post('/manage/users',data.field,function (res) {
              if(res.code===200){
                  sessionStorage.setItem("loginUser",JSON.stringify(res.data));
                  layer.msg("登录成功");
                  location.href="index.html";
              }else{
                  layer.msg(res.msg);
              }
          },'json')
      });
      return false;
    });

    //表单输入效果
    $("#app .input-item .layui-input").click(function (e) {
      e.stopPropagation();
      $(this).addClass("layui-input-focus").find(".layui-input").focus();
    })
    $("#app .layui-form-item .layui-input").focus(function () {
      $(this).parent().addClass("layui-input-focus");
    })
    $("#app .layui-form-item .layui-input").blur(function () {
      $(this).parent().removeClass("layui-input-focus");
      if ($(this).val() != '') {
        $(this).parent().addClass("layui-input-active");
      } else {
        $(this).parent().removeClass("layui-input-active");
      }
    })
  });
</script>
</body>
</html>
